<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u-search placeholder="搜索或新增客户" v-model="searchData.keywords" @change="onSearchChange" :showAction="false"></u-search>
          </view>
        </template>
      </view>
    </hx-navbar>

    <u-grid ref="tabBarSearch" :border="false" class="tabBarSearch">
      <u-grid-item
          v-for="(baseListItem,baseListIndex) in tabBarSearchList"
          :key="baseListIndex"
          class="tabBarSearchItem"
          @click="tabBarSearchItemClick(baseListItem)"
      >
        <view class="title">
          <text>{{baseListItem.title}}</text>
        </view>
        <view>
          <u-icon
              :name="baseListItem.name"
              :size="12"
              color="rgb(83 83 83 / 50%)"
          ></u-icon>
        </view>
      </u-grid-item>
    </u-grid>

    <u-loading-page :loading="pageLoading"></u-loading-page>
    <scroll-view scroll-y refresher-enabled show-scrollbar :refresher-triggered="triggered"
                 @refresherrefresh="$u.throttle(onRefresherrefresh, 200)" @scrolltolower='$u.throttle(onScrolltolower,1000)'
                 :style="{height: `${screenHeight}px`, backgroundColor: '#fff'}">

      <view v-if="listData.length === 0" :style="{paddingTop: `${screenHeight / 4}px`}">
        <u-empty mode="list" />
        <u-button class="empty-button" type="primary" text="新增" @tap="clickBtn({key: 'btn1'})"></u-button>
      </view>

      <u-cell  v-for="item in listData" :key="item.id" :title="item.name" @click="itemProductClick(item.id)">
        <view slot="icon" class="list-item-avatar">
          <u-avatar
              fontSize="18"
              randomBgColor
              :text="item.name[item.name.length - 1]"
          ></u-avatar>
        </view>
        <view slot="right-icon" class="list-item-text">
          <text class="label">累次</text>
          <text class="amount" :class="{'is-green': item.amountDeb > 0}">{{ item.amountDebt }}</text>
        </view>
      </u-cell>
    </scroll-view>

    <!-- 筛选弹框 - 1 -->
    <u-popup :show="show" mode="right" overlayOpacity="0.3" @close="show = false">
      <view class="pop-view">
        <view>
          <cx-select-customer title="类别" @input="categoryInput" @update:label="categoryLabel" name="SelectCategory" />
          <cx-select-customer title="门店" @input="shopInput" @update:label="shopLabel" name="SelectShop"  />
        </view>
        <view class="fot-btn flex flex-sw p-l-10 p-r-10">
          <u-button text="重置" shape="circle" class="reset m-r-10"></u-button>
          <u-button text="搜索" shape="circle" color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"></u-button>
        </view>
      </view>
    </u-popup>

    <!-- 筛选弹框 - 2 -->
    <u-popup :show="typeShow" mode="bottom" overlayOpacity="0.3" @close="typeShowClose">
      <view class="popup-bottom-view">
        <cx-commodity-type :active="typeActive" @target="typeTarget" />
      </view>
    </u-popup>

    <!-- 筛选弹框 - 4 -->
    <u-popup :show="accumulationShow" mode="bottom" overlayOpacity="0.3" @close="accumulationShowClose">
      <view class="popup-bottom-view">
        <u-cell v-for="(item, index) in accumulationList" :key="index" :title="item.name" @click="targetAccumulation(item, index)">
          <u-icon v-if="accumulationActive === index" slot="right-icon" size="20" color="#409EFF" name="checkmark"></u-icon>
        </u-cell>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  listOptionsPage
} from '@/apis/bill/saleReserve'

export default {
  name: 'customer-order',
  data() {
    return {
      config: {
        title: "客户",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
          {
            key: "btn2",
            icon: "&#xe888;",
            position: "left",
          },
        ],
      },

      show: false,
      typeShow: false,
      accumulationShow: false,

      tabBarSearchList: [
        {
          name: 'arrow-down-fill',
          title: '全部',
          key: 'type',
          show: false
        },
        {
          name: 'arrow-down-fill',
          title: '业务员',
          key: 'salesman',
          show: false
        },
        {
          name: 'arrow-down-fill',
          title: '累欠降序',
          key: 'accumulation',
          show: false
        },
      ],

      screenHeight: 0,
      typeActive: 0,

      accumulationList: [
        {name: '累欠升序'},
        {name: '累欠降序'},
        {name: '日期升序'},
        {name: '日期降序'},
        {name: '名称升序'},
        {name: '名称降序'}
      ],
      accumulationActive: 0,

      listData: [],
      pageInfo: {
        current: 1, // 当前页
        size: 15, // 每页数据条数
        order: 'desc', // 排序方向
      },
      searchData: {},
      pageLoading: false,
      triggered: false
    }
  },
  onLoad() {
    this.initData()
  },
  mounted() {
    const height = this.$refs.hxnb.$el.offsetHeight + (this.$refs.tabBarSearch.$el.offsetHeight * 2.5);
    const sysInfo = uni.getSystemInfoSync()
    this.screenHeight = sysInfo.windowHeight - height
  },
  methods: {
    initData() {
      this.listPage()
    },
    listPage() {
      const params = {
        page: this.pageInfo,
        data: this.searchData
      }
      uni.showLoading({
        title: "加载中"
      })
      listOptionsPage(params).then(res => {
        if (!res.data.flag) return
        const records = res.data.data.records || []
        this.listData.push(...records)
      }).finally(_ => {
        this.triggered = false
        this.pageLoading = false
        uni.hideLoading()
      })
    },
    clickBtn(item) {
      if (item.key === "btn1") {
        this.$Router.push({
          name: "customerOrderAdd"
        })
      }
      if (item.key === "btn2") {
        this.show = true
      }
    },
    categoryInput(e) {
      console.log(e)
    },
    categoryLabel(e) {
      console.log(e)
    },
    shopInput(e) {
      console.log(e)
    },
    shopLabel(e) {
      console.log(e)
    },
    searchChange() {

    },
    typeTarget(item, index) {
      this.typeActive = index
      this.typeShow = false
      this.tabBarSearchList[0].show = false
      this.tabBarSearchList[0].name = 'arrow-down-fill'
    },
    targetAccumulation(item, index) {
      this.accumulationActive = index
      this.accumulationShow = false
      this.tabBarSearchList[2].show = false
      this.tabBarSearchList[2].name = 'arrow-down-fill'
    },
    tabBarSearchItemClick({ key }) {
      if (key === 'salesman') return this.$Router.push({
        name: "SelectSalesman"
      })

      const index = this.tabBarSearchList.findIndex(item => item.key === key)
      const checkShow = !this.tabBarSearchList[index].show
      this.tabBarSearchList[index].show = checkShow
      this.tabBarSearchList[index].name = checkShow ? 'arrow-up-fill' : 'arrow-down-fill'

      if (key === 'type') return this.typeShow = true
      if (key === 'accumulation') return this.accumulationShow = true
    },
    typeShowClose() {
      this.typeShow = false
      this.tabBarSearchList[0].show = false
      this.tabBarSearchList[0].name = 'arrow-down-fill'
    },
    accumulationShowClose() {
      this.accumulationShow = false
      this.tabBarSearchList[2].show = false
      this.tabBarSearchList[2].name = 'arrow-down-fill'
    },
    onRefresherrefresh() {
      this.triggered = true
      this.listData = []
      this.listPage()
    },
    onScrolltolower() {},
    onSearchChange() {
      this.handlerSearch()
    },
    handlerSearch: _.debounce(function() {
      this.listData = []
      this.pageInfo.current = 1
      this.listPage()
    }, 200),
    itemProductClick(id) {
      uni.navigateTo({
        url: `pages/application/pages/cloth/customer-product/index?id=${id}`
      })
    }
  }
}
</script>

<style scoped lang="scss">
.pop-view {
  width: 500rpx;
  padding-top: 190rpx;
  .fot-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 20rpx;
  }
  .reset {
    color: #409eff;
    background-color: #e3edff;
  }
}

.popup-bottom-view {
  padding: 20upx 10upx;
}

.tabBarSearch {
  margin-top: 110upx;
  padding-top: 20upx;
  padding-bottom: 20upx;
  border-bottom: 1upx #dadada solid;
  background-color: #fff;

  .tabBarSearchItem {
    display: flex;
    flex-direction: row;
    align-items: center;

    .title {
      margin-right: 20upx;
      color: #535353bf;
    }
  }
}

.input-product {
  width: 95%;
  margin: 20upx auto;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}

.list-item-avatar {
  margin-right: 20upx;
}

.list-item-text {
  .label {
    font-size: 30upx;
    color: #dadada;
    margin-right: 20upx;
  }
}

.amount {
  color: red;

  &.is-green {
    color: green;
  }
}

.empty-button {
  margin: auto;
  margin-top: 20rpx;
  width: 80%;
}

</style>
